<template>
  <vue-form :state="formstate" ref="form" v-if="showing">
    <validate tag="div" class="weui-cell_item" :custom="{ 'validatorName': validatorName }">
      <div class="weui-cells__title"><span class="err">*</span>负责人姓名</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.leader_name" type="text" required name="leader_name" placeholder="请输入负责人姓名"/>
        </div>
      </div>
      <field-messages name="leader_name" show="$touched">
        <div slot="required" class="err">负责人姓名必填~</div>
        <div slot="validatorName" class="err">姓名格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validatorPhone': validatorPhone }">
      <div class="weui-cells__title"><span class="err">*</span>联系电话</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.leader_phone" type="text" maxlength="11" required name="leader_phone" placeholder="请输入联系电话"/>
        </div>
      </div>
      <field-messages name="leader_phone" show="$touched">
        <div slot="required" class="err">联系电话必填~</div>
        <div slot="validatorPhone" class="err">电话格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>证件类型</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="leader_id_type_name" @focus.stop.prevent="handleChangeCardType" readonly type="text" required name="leader_id_type_name" placeholder="请选择"/>
        </div>
      </div>
      <field-messages name="leader_id_type_name" show="$touched">
        <div slot="required" class="err">证件类型必填~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item" :custom="{ 'validbankard': validbankard }">
      <div class="weui-cells__title"><span class="err">*</span>证件号码</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.leader_id_no" type="text" required name="leader_id_no" placeholder="请输入证件号码"/>
        </div>
      </div>
      <field-messages name="leader_id_no" show="$touched">
        <div slot="required" class="err">证件号码必填~</div>
        <div slot="validbankard" class="err">证件号码格式错误~</div>
      </field-messages>
    </validate>
    <validate tag="div" class="weui-cell_item">
      <div class="weui-cells__title"><span class="err">*</span>证件有效期</div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <input class="weui-input" v-model="model.leader_time" readonly @focus.stop.prevent="handleDateSelectEnd" type="text" required name="leader_time" placeholder="请选择"/>
        </div>
      </div>
      <field-messages name="leader_time" show="$touched">
        <div slot="required" class="err">证件有效期必填~</div>
      </field-messages>
    </validate>
    <div class="weui-cells weui-cells_form" id="uploader">
      <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <div class="weui-uploader__title">证件照片</div>
                <!-- <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div> -->
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img :src="model.leader_id_1" v-if="model.leader_id_1" alt="">
                    <input id="uploaderInput" ref="leader_id_1" class="weui-uploader__input" readonly @change="handleUploadLeader1" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>身份证正面</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img :src="model.leader_id_2" v-if="model.leader_id_2" alt="">
                    <input id="uploaderInput" class="weui-uploader__input" ref="leader_id_2" readonly @change="handleUploadLeader2" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>身份证反面</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img :src="model.leader_id_3" v-if="model.leader_id_3" alt="">
                    <input id="uploaderInput" class="weui-uploader__input" ref="leader_id_3" readonly @change="handleUploadLeader3" type="file" accept="image/*" multiple="" />
                  </div>
                  <p><span class="err">*</span>手持身份证</p>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="pb20 pt40">
      <button class="weui-btn weui-btn_primary" @touchstart.stop.prevent="handleClickSubmit">提交审核</button>
    </div>
   <!--  <div id="loadingToast" v-show="show">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">{{ uploader_time }}%</p>
      </div>
    </div> -->
  </vue-form>
  <div class="show" v-else>
    <div class="weui-flex">负责人姓名：<span>{{ model.leader_name }}</span></div>
    <div class="weui-flex">联系电话：<span>{{ model.leader_phone }}</span></div>
    <div class="weui-flex">证件类型：<span>{{ leader_id_type_name }}</span></div>
    <div class="weui-flex">证件号码：<span>{{ model.leader_id_no }}</span></div>
    <div class="weui-flex">证件有效期：<span>{{ model.leader_time }}</span></div>
    <div class="weui-cells weui-cells_form" id="uploader">
      <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <div class="weui-uploader__title">证件照片</div>
              </div>
              <div class="weui-uploader__bd">
                <ul class="weui-uploader__files" id="uploaderFiles"></ul>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img :src="model.leader_id_1" v-if="model.leader_id_1" alt="">
                  </div>
                  <p><span class="err">*</span>身份证正面</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img :src="model.leader_id_2" v-if="model.leader_id_2" alt="">
                  </div>
                  <p><span class="err">*</span>身份证反面</p>
                </div>
                <div class="weui-uploader_box">
                  <div class="weui-uploader__input-box">
                    <img :src="model.leader_id_3" v-if="model.leader_id_3" alt="">
                  </div>
                  <p><span class="err" v-if="merchant_type === 300">*</span>手持身份证</p>
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
    <div class="pb20 pt40">
      <button class="weui-btn weui-btn_primary" @touchstart.stop.prevent="showing=!showing">编辑资料</button>
    </div>
  </div>
</template>

<script>
  import { validatePhone, validChinese, validateIdentity } from '@/utils/validate'
  import { uploader } from '@/utils/uploader'
  import { merchantPrincipalUpdate } from '@/api/index'
  import { GetMerchantInfo } from '@/api/salesman'
  import { getAgent, getToken, getId } from '@/utils/auth'

  export default {
    name: 'principal',
    data() {
      return {
        formstate: {},
        cards: [
          { value: 1, label: '身份证' }
        ],
        leader_id_type_name: null,
        show: false,
        showing: false,
        model: {
          leader_name: '',
          leader_time: '',
          leader_phone: '',
          leader_id_no: '',
          leader_id_type: '',
          leader_id_1: '',
          leader_id_2: '',
          leader_id_3: ''
        }
      }
    },
    methods: {
      validatorPhone(v) {
        if(validatePhone(v)) {
          return true
        }else {
          return false
        } 
      },
      validbankard(v) {
        if (validateIdentity(v)) {
          return true
        } else {
          return false
        }
      },
      validatorName(v) {
        if (validChinese(v)) {
          return true
        } else {
          return false
        }
      },
      handleChangeCardType() {
        const _this = this
        this.$weui.picker(_this.cards, {
          onChange(res) {
            _this.model.leader_id_type = res[0].value
            _this.leader_id_type_name = res[0].label
          }
        })
      },
      handleDateSelectEnd() {
        const _this = this
        const Now = new Date()
        const end = Now.getFullYear() + 100
        this.$weui.datePicker({
          start: new Date(),
          end,
          onChange(res) {
            const value = res[0].value + '-' + res[1].value + '-' + res[2].value
            _this.model.leader_time = value
          }
        })
      },
      handleUploadLeader1() {
        uploader(this, this.$refs.leader_id_1.files).then(res => {
          this.model.leader_id_1 = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleUploadLeader2() {
        uploader(this, this.$refs.leader_id_2.files).then(res => {
          this.model.leader_id_2 = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleUploadLeader3() {
        uploader(this, this.$refs.leader_id_3.files).then(res => {
          this.model.leader_id_3 = res
          this.show = false
        }).catch(err => {
          this.show = false
          this.$weui.alert(err)
        })
      },
      handleClickSubmit() {
        if(this.formstate.$invalid) {
         this.$weui.alert('请补全资料')
         return false
        } else {
          this.$loading(true, '正在提交')
          merchantPrincipalUpdate(this.$route.query.merchant_num, getAgent(), getId(), getToken(), this.model).then(res => {
            if (res.data.errorCode === 0) {
              this.$loading(false)
              this.$toast('提交成功')
              this.showing = false
            } else {
              this.$loading(false)
              this.$weui.alert(res.data.errorMsg)
            }
          })
        }
      }
    },
    created() {
      GetMerchantInfo(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.merchant_type = res.data.result.base.type
          this.model.leader_id_no = res.data.result.leader.leader_id_no
          this.model.leader_id_type = res.data.result.leader.leader_id_type
          res.data.result.leader.leader_id_type === 1 ? this.leader_id_type_name = '身份证' : this.leader_id_type_name = ''
          this.model.leader_name = res.data.result.leader.leader_name
          this.model.leader_phone = res.data.result.leader.leader_phone
          this.model.leader_time = res.data.result.leader.leader_id_expire
          if (res.data.result.leader.photo.length !== 0) {
            this.model.leader_id_1 = res.data.result.leader.photo.leader_id_1[0]
            this.model.leader_id_2 = res.data.result.leader.photo.leader_id_2[0]
            res.data.result.leader.photo.hasOwnProperty('leader_id_3') ? this.model.leader_id_3 = res.data.result.leader.photo.leader_id_3[0] : this.model.leader_id_3 = ''
          }
        } else {
          this.$weui.alert(res.data.errorMsg)
        }
      })
    }
  }
</script>